<template>
  <el-form :model="form" :rules="formRules" ref="formRef">
    <el-form-item prop="username">
      <el-input v-model="form.username" placeholder="输入您的用户名"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="form.password" show-password type="password" placeholder="输入您的密码"></el-input>
    </el-form-item>
    <el-form-item prop="captcha">
      <div class="captcha">
        <el-input v-model="form.captcha" placeholder="请输入图形验证码"></el-input>
        <img @click="handlerGetVerifyCode" :src="captchaUrl" class="captcha-img">
      </div>
    </el-form-item>
    <el-form-item>
      <div class="flex-row justify-space-between w-100 ">
        <el-checkbox v-model="form.isCheck" size="large">记住我</el-checkbox>
        <el-link class="color-primary" :underline="false">忘记密码？</el-link>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button @click="handlerSubmitLogin(formRef)" type="primary" class="my_button w-100"
        style="height:56px;">使用账号密码登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from 'vue'
import { getVerifyCode, postPwdLogin } from '@api/user'
import { IPwdRuleForm } from '@dts/common'
import { encrypt } from '@utils/aes'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus';






const captchaUrl = ref<string>('')
const formRef = ref<FormInstance>()

const form = reactive({
  password: 'abc123456',
  username: 'admin',
  key: '',
  captcha: '',
  isCheck: false
})

const formRules: FormRules<IPwdRuleForm> = {
  username: [
    { required: true, message: "请输入用户名", trigger: 'blur' },
    { min: 5, max: 12, message: "用户名范围5-12字符", trigger: 'blur' }
  ],
  password: [
    { required: true, message: "请输入用户密码", trigger: 'blur' },
  ],
  captcha: [
    { required: true, message: "请输入图形验证码", trigger: "blur" },
    { min: 4, max: 4, message: "验证码应为4位", trigger: "blur" }
  ]
}


const handlerGetVerifyCode = async () => {
  form.key = new Date().getTime().toString()
  const res = await getVerifyCode(form.key)
  const blob = new Blob([res], { type: "application/vnd.vnd.ms-excel" })
  const imgUrl = URL.createObjectURL(blob)
  captchaUrl.value = imgUrl
}


const handlerSubmitLogin = (_ref: FormInstance | undefined) => {
  if (!_ref) return
  _ref?.validate(async (valid) => {
    if (!valid) return
    postPwdLogin({
      username: encrypt(form.username),
      password: encrypt(form.password),
      captcha: form.captcha,
      key: form.key
    }).then(() => {
      ElMessage.success('登录成功')
      _ref.resetFields()
    }).catch(err => {
      console.log(err)
    })
  })
}



onBeforeMount(() => {
  handlerGetVerifyCode()
})



</script>

<style lang="scss" scoped>
.el-input__inner {
  color: var(--default-color) !important;
}

::v-deep(.el-checkbox__inner) {
  border-radius: 50%;
}


.my_button {
  background-color: var(--primary-color);
  border-radius: 12px;


}

.el-button:hover {
  background-color: var(--secondary-bg-color);
  outline-color: var(--secondary-bg-color);
  border-color: var(--secondary-bg-color);
}


.el-button:focus {
  background-color: var(--primary-color);
  outline-color: var(--primary-color);
  border-color: var(--primary-color);
}

.captcha {
  display: flex;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .captcha-img {
    width: 200px;
    height: 56px;
    margin-left: 20px;
    border-radius: 12px;
  }
}
</style>
@dts/common
